<template>
	<view>
		<u-popup :show="show" :round="10" :closeable="true" mode="center" @close="close" :safeAreaInsetBottom="false">
			<view class="reduce bf p15 f18 f-y-bt" @tap.stop>
				<view class="f-x-bt wei f20">
					<view class="dfa f-c f-g-1">修改资料</view>
				</view>

				<u--form ref="uForm" labelPosition="left" :model="userInfo"
					:labelStyle="{'font-size':'14px','padding':'10rpx 0'}" :rules="rules">
					<view class="card p-0-10 bf" style="border-radius: 6px;">
						<u-form-item label="手机号" prop="mobile" labelWidth="160rpx" :required="true">
							<u--input v-model="userInfo.mobile" border="none" inputAlign="right"
								placeholder="请输入手机号"></u--input>
						</u-form-item>
						<u-form-item label="真实姓名" prop="name" labelWidth="160rpx">
							<u--input v-model="userInfo.realname" border="none" inputAlign="right"
								placeholder="请输入真实姓名"></u--input>
						</u-form-item>
						<u-form-item label="性别" prop="sex" labelWidth="160rpx">
							<u-radio-group v-model="userInfo.sex" placement="row" icon-color="#000" size="16">
								<view class="f-1 f-x-e">
									<u-radio :activeColor="subColor" label="男" :name="1"></u-radio>
									<view class="pl20"></view>
									<u-radio :activeColor="subColor" label="女" :name="2"></u-radio>
								</view>
							</u-radio-group>
						</u-form-item>
						<view class="desc">
							<u-form-item label="生日" prop="birthday" @click="showBirth = true" labelWidth="160rpx">
								<u--input v-if="userInfo.birthday==''" v-model="userInfo.birthday" type="text" disabled
									disabledColor="#ffffff" placeholder="请选择" border="none">
								</u--input>
								<view class="tar" v-else>{{userInfo.birthday|formatDate}}</view>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</u-form-item>
						</view>
					</view>
				</u--form>
				<view class="f-1 f-y-e">
					<u-button @click="close" :customStyle="{marginRight:'10px'}"><text class="c0">取消</text></u-button>
					<u-button color="#FDDA34" @click="submit"><text class="c0">确认</text></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层 -->
		<u-toast ref="uToast" />
		<u-datetime-picker :show="showBirth" :closeOnClickOverlay="true" v-model="userInfo.birthday" mode="date"
			:minDate="23592663" @close="showBirth = false" @cancel="showBirth = false" @confirm="saveBday">
		</u-datetime-picker>
	</view>
</template>

<script>
	import keybored from '@/components/liujto-keyboard/keybored.vue';
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			keybored,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				show: false,
				showBirth: false,
				userInfo: {},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		computed: {
			...mapState({
				reasonConfig: state => state.config.reasonConfig,
			}),
		},
		methods: {
			open(val) {
				this.userInfo = val
				this.show = true
			},
			close() {
				this.showBirth = false
				this.show = false
			},
			async saveBday(e) {
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.userInfo.birthday = timeValue
				this.showBirth = false
			},
			submit() {
				if (this.userInfo.mobile) {
					this.$emit('handeditInfo', this.userInfo)
				} else {
					uni.$u.toast('请输入手机号');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-input__content__field-wrapper__field {
		font-size: 28rpx !important;
		text-align: right !important;
	}

	/deep/.u-radio-group--row {
		justify-content: flex-end !important;

		.u-radio {
			margin-left: 60rpx;
		}
	}

	/deep/.u-form-item__body__right__content__slot {
		text-align: right;
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx !important;
	}

	.reduce {
		width: 650rpx;
		overflow: hidden;
		border-radius: 20rpx;

		.uScroll {
			height: 580rpx;
			overflow: hidden;
			overflow-y: scroll;
		}

		.tabs {
			display: inline-flex;
			border-radius: 6px;
			background: #eeeeee;

			.tab_i {
				padding: 8px 15px;
			}
		}

		.bffd {
			background: #FDDA34;
		}

		.dis {
			padding: 8px 0;
			width: 23%;
			border: 1px solid #e6e6e6;
		}

		// .key {
		// 	/deep/.ljt-keyboard-body {
		// 		border-radius: 10px;
		// 		border: 1px solid #e5e5e5;

		// 		/deep/.ljt-keyboard-number-body {
		// 			width: 320px !important;
		// 			height: 200px !important;
		// 		}

		// 		.ljt-number-btn-confirm-2 {
		// 			background: #FDDA34 !important;
		// 		}
		// 	}
		// }

		.reson_i {
			position: relative;
			display: inline-block;
			border: 1px solid #e6e6e6;
			padding: 8px 15px;

			.r_gou {
				display: none;
				position: absolute;
				top: 0px;
				right: 0px;
				width: 0;
				height: 0;
				border-top: 10px solid #4275F4;
				border-right: 10px solid #4275F4;
				border-left: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}

			.icon-duigou {
				display: none;
				position: absolute;
				top: -2px;
				right: -2px;
				transform: scale(0.6);
			}
		}

		.acreson_i {
			border: 1px solid #FD8906;
			background: #fff9dd;

			.r_gou,
			.icon-duigou {
				display: block;
			}
		}
	}
</style>